<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">累加</button>
    <button @click="destroy">卸载</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    destroy() {
      this.$destroy()
    },
  },

  // before的触发条件:data被修改,但视图还未更新,此时得到的数据和视图中展示的不一致
  beforeUpdate() {
    console.log(this.count);
  },

  // 这个阶段Vue已经根据新的数据渲染了新的虚拟DOM,并根据diff算法生成了,修改了真实DOM,视图和数据已经一致
  updated() {
    console.log(this.count);
  },
  // 这个阶段一般进行收尾操作
  beforeDestroy(){
    console.log(10);
  },
  // 这个阶段之前,Vue取消了侦测(数据双向绑定),并把子组件内部的事件等全部拆卸掉
  destroyed(){
    console.log(22);
  }
};
</script>

<style>
</style>